<template>
  <div class="comp-report-error-attendance">
    <p class="title">服务时效性</p>
    <CompModuleHeader title="各故障分类处理耗时配置" />
    <div class="content-box">
      <div class="header">
        <span>故障分类</span>
        <div>处理耗时<svg-icon icon-class="question" /></div>
      </div>
      <el-divider />
      <el-tree :expand-on-click-node="false" :data="timelinessConfigTreeData">
        <div slot-scope="{ data }" class="custom-tree-node">
          <span class="node-label">{{ data.name }}</span>
          <div class="node-content">
            <div v-if="data.isEdit">
              <el-input-number v-model="data.minTime" controls-position="right" :min="0" size="small" />
              <span>-</span>
              <el-input-number v-model="data.maxTime" controls-position="right" :min="0" size="small" />
              <span>分钟</span>
            </div>
            <span v-else>{{ data.minTime }}-{{ data.maxTime }}{{ data.unit === 1 ? '分钟' : '小时' }}</span>
          </div>
          <div class="node-operate">
            <pure-button
              v-if="data.isEdit"
              label="完成"
              type="text"
              @click="onNodeEditFinish(data)"
            />
            <pure-button
              v-else
              label="编辑"
              type="text"
              @click="onNodeEdit(data)"
            />
          </div>
        </div>
      </el-tree>
    </div>
    <CompModuleHeader title="服务时效性评级规则" />
    <el-form label-width="100px" class="form-box">
      <el-form-item label="优秀">
        <span class="desc">&lt;处理耗时最小值</span>
      </el-form-item>
      <el-form-item label="达标">
        <span class="desc">>=处理耗时最小值 ~ &lt;=处理耗时最大值</span>
      </el-form-item>
      <el-form-item label="不达标">
        <span class="desc">&gt;处理耗时最大值</span>
      </el-form-item>
    </el-form>
    <div class="btn-box">
      <pure-button label="应用" :disabled="isButtonDisabled" @click="updateConfig" />
      <pure-button label="取消" type="patch" :disabled="isButtonDisabled" @click="onCancel" />
    </div>
  </div>
</template>

<script>
import CompModuleHeader from './module-header.vue';
import { getDicListByType, getTimelinessConfigTreeData, updateTimelinessConfigData, } from '../api';
import { cloneDeep, isEqual, } from 'lodash-es';

function addIsEdit(data) {
  return data.map(item => {
    item.isEdit = false;
    if (item.children) {
      item.children = addIsEdit(item.children);
    }
    return item;
  });
}

export default {
  components: {
    CompModuleHeader,
  },
  data() {
    return {
      faultTypeList: [],
      formData: {
        delayTime: '',
        leadTime: '',
      },
      originalFormData: null,
      timelinessConfigTreeData: [],
    };
  },
  computed: {
    isButtonDisabled() {
      return !this.originalFormData || isEqual(this.originalFormData, this.formData);
    },
  },
  created() {
    this.getFaultTypeList();
    this.getConfig();
  },
  methods: {
    getFaultTypeList() {
      getDicListByType('obs_fault_type').then(res => {
        this.faultTypeList = res.data;
      });
    },
    getConfig() {
      const loading = this.showLoading();
      getTimelinessConfigTreeData().then((result) => {
        if (result.data) {
          this.timelinessConfigTreeData = addIsEdit(result.data);
          this.originalFormData = result.data;
          this.formData = cloneDeep(result.data);
        }
      }).finally(() => {
        loading.close();
      });
    },
    updateConfig() {
      const loading = this.showLoading();
      updateTimelinessConfigData(this.formData).then(() => {
        this.$message.success('操作成功');
        this.getConfig();
      }).finally(() => {
        loading.close();
      });
    },
    onCancel() {
      this.formData = cloneDeep(this.originalFormData);
    },
    onNodeEdit(data) {
      data.isEdit = true;
      /* this.timelinessConfigTreeData = [
        ...this.timelinessConfigTreeData,
      ]; */
    },
    onNodeEditFinish(data) {
      data.isEdit = false;
      /* this.timelinessConfigTreeData = [
        ...this.timelinessConfigTreeData,
      ]; */
    },
  },
};
</script>

<style lang="scss" scoped>
.comp-report-error-attendance {
  padding: 16px;
  background: #fff;
  .title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
  }
  .content-box {
    max-width: 500px;
    margin-bottom: 20px;
    .header {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
    }
  }
  .custom-tree-node {
    flex: auto;
    display: flex;
    align-items: center;
    font-size: 14px;
    .node-label {
      flex: auto;
    }
    .node-content {
      flex: none;
      margin: 0 20px;
    }
    .node-operate {
      flex: 0 0 80px;
      text-align: center;
    }
  }
  .form-box {
    max-width: 500px;
    .desc {
      font-size: 14px;
    }
  }
}
</style>
